  <template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>菜单管理</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="mb-20 clearfix">
          <Button type="primary" icon="plus-circled" @click="show_create_top_menu">添加系统</Button>
        </div>
        <Row :gutter="16">
          <Col span="8">
          <div>
            <Card>
              <div slot="title">菜单树</div>
              <Tree :data="tree_data" @on-select-change="get_node_info"></Tree>
            </Card>
          </div>
          </Col>
          <Col span="16">
          <Card>
            <div slot="title">
              菜单节点配置
            </div>
            <div>
              <div class="mb-20">
                <ButtonGroup v-if="flag_node_selected==true">
                  <Button type="primary" size="small" @click="create_sub_menu">
                    <Icon type="plus"></Icon>
                    新建子菜单
                  </Button>
                  <Button type="error" size="small" @click="del_current_node">
                    <Icon type="trash-a"></Icon>
                    删除当前菜单
                  </Button>
                </ButtonGroup>
              </div>
              <Form :model="selected_item_data" v-if="flag_node_selected==true" :label-width="150">
                <FormItem label="父级节点" prop="parentId">
                  <Input placeholder="请输入" readonly v-model="selected_item_data.parentId" style="width:150px"/>
                </FormItem>
                <FormItem label="显示名称" prop="label">
                  <Input placeholder="请输入" v-model="selected_item_data.title" style="width:150px"/>
                </FormItem>
                <FormItem label="排列顺序" prop="name">
                  <Input placeholder="请输入" v-model="selected_item_data.orderNum" style="width:150px"/>
                </FormItem>
                <FormItem label="图标" prop="icon">
                  <Input placeholder="请输入" v-model="selected_item_data.icon" style="width:150px"/>
                </FormItem>
                <FormItem label="前后端标识（ROLE_*）" prop="code">
                  <Input placeholder="请输入" v-model="selected_item_data.code" style="width:350px"/>
                </FormItem>
                <FormItem label="后端过滤路径" prop="path">
                  <Input placeholder="请输入" v-model="selected_item_data.path" style="width:350px"/>
                </FormItem>
                <FormItem label="所属系统" prop="systemId" v-if="selected_item_data.parentId==-1">
                  <Select v-model="selected_item_data.sysId" style="width:150px">
                    <Option v-for="item in all_system_data" :value="item.id" :key="item.id">{{ item.name }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="描述备注" prop="name">
                  <Input placeholder="请输入" v-model="selected_item_data.description" style="width:350px"/>
                </FormItem>



                <!-- <FormItem label="前端组件" prop="name">
                        <Input  placeholder="请输入" v-model="selected_item_data.code"></Input>
                    </FormItem> -->
                <div>
                  <Button type="primary" :loading="loading_post_menu_data" @click="post_node">保存</Button>
                </div>
              </Form>
            </div>
          </Card>
          </Col>
          <!-- <Col span="14">
                    <Card>
                        <div slot="title">页面元素配置</div>
                        <div>
                            <div class="mb-20" v-if="flag_node_selected==true">
                                <Input placeholder="请输入资源编码" v-model="element_search_key_words" style="width: 200px;margin-right:5px;"></Input>
                                <Button style="margin-right:15px;" type="primary" @click="get_page_elements">搜索</Button>
                                <Button type="primary" icon="plus-circled" @click="show_create_element_modal">新增</Button>
                            </div>
                            <Table width="100%" v-if="flag_node_selected==true" border :loading="loading_elements_data" :columns="elements_columns" :data="elements_data"></Table>
                        </div>
                    </Card>
                    </Col>-->

        </Row>

        <!--新建顶级菜单-->
        <Modal v-model="modals.create_top_menu.show_modal" :title="modals.create_top_menu.modal_title" @on-ok="post_top_node">
          <Form ref="create_top_menu_form" :model="modals.create_top_menu.data" :rules="modals.create_top_menu.rules" :label-width="120">
            <FormItem label="路径编码" prop="code">
              <Input placeholder="请输入" v-model="modals.create_top_menu.data.code"/>
            </FormItem>
            <FormItem label="标题" prop="title">
              <Input placeholder="请输入" v-model="modals.create_top_menu.data.title"/>
            </FormItem>
            <FormItem label="图标" prop="icon">
              <Input placeholder="请输入" v-model="modals.create_top_menu.data.icon"/>
            </FormItem>
            <FormItem label="资源路径" prop="path">
              <Input placeholder="请输入" v-model="modals.create_top_menu.data.path"/>
            </FormItem>
          </Form>
        </Modal>

        <!--页面元素弹层-->
        <Modal v-model="modals.create_or_update_element.show_modal" :title="modals.create_or_update_element.modal_title" @on-ok="post_element">
          <Form ref="create_or_update_element_form" :model="modals.create_or_update_element.data" :rules="modals.create_or_update_element.rules" :label-width="120">
            <FormItem label="资源类型" prop="type">
              <Select v-model="modals.create_or_update_element.data.type" style="width:200px">
                <Option v-for="item in modals.create_or_update_element.source_type_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="资源编码" prop="code">
              <Input placeholder="请输入资源编码" v-model="modals.create_or_update_element.data.code" style="width:300px;"/>
            </FormItem>
            <FormItem label="资源名称" prop="name">
              <Input placeholder="请输入资源名称" v-model="modals.create_or_update_element.data.name" style="width:300px;"/>
            </FormItem>
            <FormItem label="资源请求类型" prop="method">
              <Select v-model="modals.create_or_update_element.data.method" style="width:200px">
                <Option v-for="item in modals.create_or_update_element.source_methods_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="资源地址" prop="uri">
              <Input placeholder="请输入资源地址" v-model="modals.create_or_update_element.data.uri" style="width:300px;"/>
            </FormItem>
          </Form>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getTree,
  getPageElement,
  createMenu,
  putMenu,
  createElement,
  putElement,
  delMenu,
  ajaxGetAllSystem
} from "../../api/base_sys/base_manager.js";

export default {
  data() {
    return {
      modals: {
        selected_item_data:{
          rules: {
            label: [
              {
                required: true,
                message: "请填写显示名称 ",
                trigger: "blur"
              }
            ],
            name: [
              {
                required: true,
                message: "请填写排列顺序",
                trigger: "blur"
              }
            ],
          },
        },
        create_or_update_element: {
          show_modal: false,
          modal_title: "新增资源",
          type: "create",
          rules: {},
          source_type_list: [
            {
              value: "BUTTON",
              label: "BUTTON"
            },
            {
              value: "URI",
              label: "URI"
            }
          ],
          source_methods_list: [
            {
              value: "GET",
              label: "GET"
            },
            {
              value: "POST",
              label: "POST"
            },
            {
              value: "PUT",
              label: "PUT"
            },
            {
              value: "DELETE",
              label: "DELETE"
            }
          ],
          data: {
            name: "",
            code: "",
            type: "BUTTON",
            method: "GET",
            uri: "",
            menuId: null
          }
        },
        create_top_menu: {
          show_modal: false,
          modal_title: "新增顶级菜单",
          loading: true,
          rules: {
            code: [
              {
                required: true,
                message: "请填写路径编码",
                trigger: "blur"
              }
            ],
            title: [
              {
                required: true,
                message: "请填写标题",
                trigger: "blur"
              }
            ],
            path: [
              {
                required: true,
                message: "请填写路由地址",
                trigger: "blur"
              }
            ]
          },
          data: {
            code: "",
            title: "",
            icon: "",
            path: "",
            orderNum: 10,
            parentId: -1
          }
        }
      },
      tree_data: [],
      all_system_data: [],
      element_search_key_words: "",
      selected_item_data: {},
      flag_create_or_put_menu: "create",
      flag_node_selected: false,
      loading_elements_data: false,
      loading_post_menu_data: false,
      elements_columns: [
        {
          title: "id",
          key: "id",
          width: 80
        },
        {
          title: "排序",
          key: "orderNum",
          width: 80
        },
        {
          title: "前后端标识",
          key: "code",
          width: 120
        },
        {
          title: "资源名称",
          key: "name",
          width: 120
        },
        {
          title: "资源类型",
          key: "type",
          width: 100
        },

        {
          title: "资源地址",
          key: "uri",
          width: 200
        },
        {
          title: "资源请求类型",
          key: "method",
          width: 120
        },
        {
          title: "操作",
          key: "",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "ghost",
                    size: "small",
                    icon: "edit"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show_update_element_modal(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                    icon: "trash-a"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.del_user_confirm(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      elements_data: []
    };
  },
  methods: {
    renderTree() {
      const _this = this;
      getTree()
        .then(rs => {
          _this.tree_data = rs.data;
          console.log(_this.tree_data,'_this.tree_data')
          
        })
        .catch(() => {});
    },
    // 获取所有可选系统
    getAllSystem() {
      ajaxGetAllSystem().then(res => {
        this.all_system_data = res.data;
        console.log(this.all_system_data,'this.all_system_data')
      });
    },
    // 添加菜单
    create_new_menu() {
      this.flag_create_or_put_menu = "create";
      // 获取当前选中菜单
      if (this.selected_item_data.id) {
        // 添加子级菜单
        this.selected_item_data.parentId = this.selected_item_data.id;
      } else {
        // 未选中父级，添加顶级菜单
        this.selected_item_data.parentId = -1;
      }
    },
    // 显示添加顶级菜单
    show_create_top_menu() {
      this.modals.create_top_menu.show_modal = true;
      this.flag_node_selected = false;
      this.modals.create_top_menu.data = {};
      this.modals.create_top_menu.data.parentId = -1;
    },
    // 保存顶级节点配置信息
    post_top_node() {
      this.loading_post_menu_data = true;
      createMenu(this.modals.create_top_menu.data)
        .then(rs => {
          this.loading_post_menu_data = false;
          this.$Message.success("操作成功！");
          this.renderTree();
        })
        .catch(e => {
          this.loading_post_menu_data = false;
        });
    },
    // 保存节点配置信息
    post_node() {
      this.loading_post_menu_data = true;
      if (this.flag_create_or_put_menu == "create") {
        createMenu(this.selected_item_data)
          .then(rs => {
            this.loading_post_menu_data = false;
            this.$Message.success("操作成功！");
            this.renderTree();
          })
          .catch(e => {
            this.loading_post_menu_data = false;
          });
      } else {
        putMenu(this.selected_item_data)
          .then(rs => {
            this.loading_post_menu_data = false;
            this.$Message.success("操作成功！");
            this.renderTree();
          })
          .catch(e => {
            this.loading_post_menu_data = false;
          });
      }
    },
    // 保存按钮或资源
    post_element() {
      const _this = this;
      if (this.modals.create_or_update_element.type == "create") {
        // 新增
        this.modals.create_or_update_element.data.menuId = this.selected_item_data.id;
        createElement(this.modals.create_or_update_element.data)
          .then(rs => {
            _this.get_page_elements();
          })
          .catch(error => {});
      } else {
        // 修改
        putElement(this.modals.create_or_update_element.data)
          .then(rs => {
            _this.get_page_elements();
          })
          .catch(error => {});
      }
    },
    // 获取节点信息
    get_node_info(selected_data) {
      console.log(selected_data,'selected_data')
      if (selected_data.length == 0) return;
      this.flag_create_or_put_menu = "put";
      this.flag_node_selected = true;
      
      const temp_node_data = JSON.parse(JSON.stringify(selected_data[0]));
      console.log(selected_data[0].id,'selected_data[0]')
      console.log(temp_node_data,'temp_node_data')
      this.selected_item_data = temp_node_data;
      this.get_page_elements();
    },
    // 根据menuId获取页面元素配置
    get_page_elements() {
      const _this = this;
      this.loading_elements_data = true;
      getPageElement({
        page: 1,
        limit: 100,
        menuId: _this.selected_item_data.id,
        name: _this.element_search_key_words
      }).then(rs => {
        _this.loading_elements_data = false;
        _this.elements_data = rs.data;
      });
    },
    // 显示新增页面元素
    show_create_element_modal() {
      this.modals.create_or_update_element.type = "create";
      this.modals.create_or_update_element.modal_title = "新增元素";
      this.modals.create_or_update_element.data = {
        name: "",
        code: "",
        type: "BUTTON",
        method: "GET",
        uri: "",
        menuId: null
      };
      this.modals.create_or_update_element.show_modal = true;
    },
    // 显示修改页面元素
    show_update_element_modal(index) {
      const temp_edit_data = JSON.parse(
        JSON.stringify(this.elements_data[index])
      );
      this.modals.create_or_update_element.type = "put";
      this.modals.create_or_update_element.modal_title = "修改元素";
      this.modals.create_or_update_element.data = temp_edit_data;
      this.modals.create_or_update_element.show_modal = true;
    },
    // 新增子页面
    create_sub_menu() {
      if (this.selected_item_data.code) {
        this.flag_create_or_put_menu = "create";
        const parentId = this.selected_item_data.id;
        this.selected_item_data = {};
        this.selected_item_data.parentId = parentId;
      }
    },
    // 删除当前节点
    del_current_node() {
      const _name = this.selected_item_data.title;
      this.$Modal.confirm({
        title: "菜单项删除确认",
        content:
          '<p>你确认删除 <strong class="color-red">' +
          _name +
          "</strong> 的节点吗，此操作不可逆，请谨慎操作！</p>",
        onOk: () => {
          delMenu(this.selected_item_data.id).then(() => {
            this.$Message.success("删除成功");
            this.renderTree();
          });
        }
      });
    }
  },
  created() {
    this.getAllSystem();
    this.renderTree();
  }
};
</script>
